$(function () {
    // ---------------  创建剪裁区 ------------------
    // - 找到剪裁区的图片 （img#image）
    let $image = $('#image');
    // - 设置配置项
    let option = {
        // 纵横比(宽高比)
        aspectRatio: 1, // 正方形
        // 指定预览区域
        preview: '.img-preview' // 指定预览区的类名（选择器）
    };
    // - 调用cropper方法，创建剪裁区
    $image.cropper(option);

    $('#chooseFile').on('click', function () {
        $('#file').trigger('click');
    })

    // --------------- 3. 文件域内容改变了，能够更换剪裁区的图片 -------------
    $('#file').on('change', function () {
        // console.log(12)
        if (this.files.length > 0) {
            // 3.1 找到文件对象
            // console.dir(this);
            let fileObj = this.files[0];
            // 3.2 为文件对象创建临时的url
            let url = URL.createObjectURL(fileObj);
            // console.log(url);
            // 3.3 更换剪裁区的图片(销毁剪裁框 --> 更换图片 --> 重新生成剪裁框)
            $image.cropper('destroy')
                .attr("src", url)
                .cropper(option)
        }
    });

    // ------------------4.获取base64格式的字符串------------------
    $('#uploadBtn').on('click', function () {
        let dataURL = $image
            .cropper('getCroppedCanvas', {
                width: 100,
                height: 100
            })
            .toDataURL('image/png')
        // console.log(dataURL);
        axios({
            method: 'POST',
            url: '/my/update/avatar',
            // 后端只接受字符串
            data: 'avatar=' + encodeURIComponent(dataURL)
        }).then(res => {
            // console.log(res);
            if (res.data.status !== 0) {
                return layui.layer.msg(res.data.message)
            }
            window.parent.getUserInfo()

        })
    })
})